<template>
	<view>
		<view class="audio-bg rel" :style="renderWidth">
			<image :src="audioBox" class="audio-img"></image>
			<view class="audio-box df ac" @click="playBtn()">
				<view style="margin-top: -2rpx">
					<view class="small"></view>
					<view
						class="middle"
						:class="playStatus === 0 ? 'stopanimate' : ''"
					></view>
					<view
						class="large"
						:class="playStatus === 0 ? 'stopanimate' : ''"
					></view>
				</view>
				<text v-if="count || count === 0" class="ml10 f24"
					>{{ count }}秒</text
				>
			</view>
			<view class="change-box" v-if="!showText" @tap="clickChangeShowText"
				><image :src="changeTextImg" class="change-img"></image
			></view>
		</view>
		<view
			class="mt20 mr20 df voice-text rel"
			v-if="showText && voiceText"
			@tap="closeText"
		>
			{{ voiceText }}
			<view class="text-close"
				><imageIcon
					:value="clearIcon"
					width="36rpx"
					height="36rpx"
				></imageIcon
			></view>
		</view>
	</view>
</template>

<script>
import clearIcon from '@/subPackagesLog/pages/workLog/icon/clear.png'
import imageIcon from '@/subPackagesLog/pages/workLog/components/imageIcon.vue'
const innerAudioContext = uni.createInnerAudioContext()
var timer
import changeTextImg from '@/static/img/change-text.png'
export default {
	props: {
		file: {
			type: String,
			value: '',
		},
		voiceText: {
			type: String,
			value: '',
			default: '',
		},
		audioTime: {
			type: Number,
			value: '',
			default: 0,
		},
		width: {
			type: [Number, String],
			default: 200,
		},
	},
	components: {
		imageIcon,
	},
	data() {
		return {
			clearIcon,
			changeTextImg,
			yuying: 'https://yilife-oss-online-public.oss-cn-hangzhou.aliyuncs.com/10000001/1015/ADMIN/lnz8ceecuqzyital7kfhp1wnp.png?timestamp=1676863826121',
			playStatus: 0, //录音播放状态 0:未播放 1:正在播放
			count: 0,
			showText: false,
			audioBox:
				'https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130655/ORG/p1or9ssi6ydoesj201ee308sw.png?timestamp=1688974982226',
		}
	},
	mounted() {
		this.count = this.audioTime
		uni.setInnerAudioOption({
			obeyMuteSwitch: false,
		})
	},
	computed: {
		renderWidth() {
			const w = this.width
			if (typeof w == 'number') {
				return 'width:' + w + 'rpx;'
			}
			return 'width:' + w
		},
	},
	methods: {
		// 倒计时
		countdown(val) {
			let _then = this
			_then.count = Number(val)
			timer = setInterval(function () {
				if (_then.count > 0) {
					_then.count--
				} else {
					clearInterval(timer)
				}
			}, 1000)
		},
		//播放
		playBtn() {
			// if(this.playStatus === 1) return
			innerAudioContext.src = this.file

			//在ios下静音时播放没有声音，默认为true，改为false就好了。
			innerAudioContext.obeyMuteSwitch = false

			//点击播放
			if (this.playStatus === 0) {
				this.playStatus = 1
				innerAudioContext.play()
				this.countdown(this.audioTime - (this.audioTime - this.count)) // 倒计时
			} else {
				this.playStatus = 0
				innerAudioContext.pause()
				clearInterval(timer)
			}
			//播放结束
			innerAudioContext.onEnded(() => {
				this.playStatus = 0
				innerAudioContext.stop()
				this.count = this.audioTime
				clearInterval(timer)
			})
		},
		//显示语音转文字
		clickChangeShowText() {
			if (!this.voiceText) {
				uni.showToast({
					title: '没有可显示的文字',
					icon: 'error',
				})
			} else {
				this.showText = true
			}
		},
		//关闭文字
		closeText() {
			this.showText = false
		},
	},
}
</script>

<style scoped lang="scss">
.audio-bg {
	position: relative;
	// background-color: #ffffff;
	// border-radius: 10rpx;
	// padding-left: 20rpx;
	// padding-right: 10rpx;
	// border: 1px solid $border-6b;
}
.audio-img {
	width: 130rpx;
	height: 44rpx;
}
.audio-box {
	position: absolute;
	top: 0;
	left: 10rpx;
	font-size: 24rpx;
	line-height: 44rpx;
	color: $border-6b;
	/* line-height: 80rpx; */
	.small {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		color: $border-6b;
	}
	.middle {
		width: 34rpx;
		height: 30rpx;
		border-radius: 50%;
		margin-left: -24rpx;
		opacity: 1;
		color: $border-6b;
	}
	.large {
		width: 48rpx;
		height: 44rpx;
		border-radius: 50%;
		margin-left: -38rpx;
		opacity: 1;
		color: $border-6b;
	}
}
.voice-text {
	padding: 20rpx 20rpx;
	font-size: 28rpx;
	background-color: $blue-color;
	border-radius: 10rpx;
	display: block;
	width: max-content;
	max-width: 90%;
}
// .audio-bg::before {
// 	content: '';
// 	position: absolute;
// 	border-top: 10rpx solid transparent;
// 	border-bottom: 10rpx solid transparent;
// 	border-left: 10rpx solid transparent;
// 	border-right: 10rpx solid $border-6b;
// 	left: -19rpx;
// 	top: 25rpx;
// }
.change-box {
	width: 66rpx;
	height: 40rpx;
	position: absolute;
	right: -18rpx;
	top: 0;
}
.change-img {
	width: 66rpx;
	height: 40rpx;
}
.text-close {
	position: absolute;
	width: 36rpx;
	height: 36rpx;
	right: -46rpx;
	top: 0;
	z-index: 9;
}
</style>
